import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_todolist/db/db.dart';
import 'package:flutter_todolist/db/table/task_table.dart';
import 'package:flutter_todolist/pages/home/task_controller.dart';
import 'package:flutter_todolist/pages/home/task_type_controller.dart';
import 'package:flutter_todolist/utils/common.dart';
import 'package:flutter_todolist/widgets/app_button.dart';
import 'package:flutter_todolist/widgets/text_input.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:flutter_todolist/util.dart';
import 'package:flutter_todolist/utils/extention.dart';
import 'package:get/get.dart';

import '../db/table/task_type_table.dart';

class AddTaskBottomSheet extends StatelessWidget {
  const AddTaskBottomSheet({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const TaskAddBottomSheetContent();
  }

  Future show(BuildContext context) async {
    showModalBottomSheet(
      context: context,
      backgroundColor: Colors.transparent,
      isScrollControlled: false,
      builder: (BuildContext context) {
        // double keyboardHeight = MediaQuery.of(context).viewInsets.bottom;
        // return SingleChildScrollView(
        //   reverse: true,
        //   padding: EdgeInsets.only(bottom: keyboardHeight),
        //   child: this,
        // );
        return this;
      }
    );
  }
}

class TaskAddBottomSheetContent extends StatefulWidget {
  const TaskAddBottomSheetContent({Key? key}) : super(key: key);

  @override
  State<TaskAddBottomSheetContent> createState() => _TaskAddBottomSheetContentState();
}

class _TaskAddBottomSheetContentState extends State<TaskAddBottomSheetContent> {

  List<String> subTasks = <String>['Call the restaurant ', 'Ask for the date '];
  late TaskTable taskTable;

  List<Map> taskTypeList = [
    {
      'type': 0,
      'title': 'Personal',
      'color': CustomColors.YellowAccent
    },
    {
      'type': 1,
      'title': 'Work',
      'color': CustomColors.GreenIcon
    },
    {
      'type': 2,
      'title': 'Meeting',
      'color': CustomColors.PurpleIcon
    },
    {
      'type': 3,
      'title': 'Study',
      'color': CustomColors.BlueIcon
    },
    {
      'type': 4,
      'title': 'Shopping',
      'color': CustomColors.OrangeIcon
    },
  ];
  TextEditingController taskTitleCtrl = TextEditingController();
  TaskController taskCtrl = Get.find<TaskController>();
  TaskTypeController taskTypeCtrl = Get.find<TaskTypeController>();

  @override
  void initState() {
    taskTable = ToDoDB().taskTable;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      height: MediaQuery.of(context).size.height - 10,
      padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
      child: Stack(
        alignment: AlignmentDirectional.topCenter,
        children: <Widget>[
          Positioned(
            // top: MediaQuery.of(context).size.height / 25,
            // top: 0,
            // bottom: 0,
            left: 0,
            child: Container(
              height: MediaQuery.of(context).size.height,
              // height: 800,
              width: MediaQuery.of(context).size.width,
              decoration: const BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.vertical(
                  top: Radius.elliptical(175, 30),
                ),
              ),
            ),
          ),
          Positioned(
            // top: MediaQuery.of(context).size.height / 2 - 340,
            top: 0,
            bottom: 0,
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                const SizedBox(height: 30),
                close(),
                content(),
                addTask()
              ],
            ),
          ),
          // Positioned(
          //     bottom: 20,
          //     child: addTask()
          // )
        ],
      ),
    );
  }

  Widget close() {
    return InkWell(
      onTap: () {
        Navigator.pop(context);
      },
      child: Container(
        width: 50,
        height: 50,
        decoration: const BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.topLeft,
            end: Alignment.bottomRight,
            colors: <Color>[
              CustomColors.PurpleLight,
              CustomColors.PurpleDark,
            ],
          ),
          borderRadius: BorderRadius.all(
            Radius.circular(50.0),
          ),
          boxShadow: [
            BoxShadow(
              color: CustomColors.PurpleShadow,
              blurRadius: 10.0,
              spreadRadius: 5.0,
              offset: Offset(0.0, 0.0),
            ),
          ],
        ),
        // child: Image.asset('assets/images/fab-delete.png'),
        child: Center(child: FaIcon(FontAwesomeIcons.xmark, size: 30.r, color: Colors.white)),
      ),
    );
  }

  Widget content() {
    return Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        const SizedBox(height: 10),
        const Text(
          'Add new task',
          style: TextStyle(
              fontSize: 13, fontWeight: FontWeight.w600),
        ),
        const SizedBox(height: 10),
        SizedBox(
          width: MediaQuery.of(context).size.width / 1.2,
          child: AppTextInput(
            hintText: "Task title",
            hintStyle: const TextStyle(fontSize: 22, color: Color(0xFFBCBCBC)),
            style: const TextStyle(fontSize: 22, fontStyle: FontStyle.normal),
            controller: taskTitleCtrl,
            maxLines: 3,
          ),
        ),
        const SizedBox(height: 5),

        // Expanded(child: taskType()),
        Container(
          // height: 100,
          // width: 100,
          color: Colors.blue.withOpacity(0.2),
          child: Obx(() => taskType()),
        ),
        20.h.hSizedBox(),

        // chooseDate(),

        // addSubTask(),
        10.h.hSizedBox(),

        // subTasks
        25.h.hSizedBox(),

        // addTask(),
        // 20.h.hSizedBox(),
      ],
    );
  }

  Widget taskType() {
    return Container(
      // height: 300,
      width: Get.width,
      child: GridView.builder(
        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 4,
            childAspectRatio: 3/4
        ),
        itemCount: taskTypeCtrl.taskTypeList.length,
        itemBuilder: (context, index) {
          return taskTypeItem(taskTypeCtrl.taskTypeList[index], index);
        },
        shrinkWrap: true,
      ),
    );
    // return Container(
    //   width: MediaQuery.of(context).size.width / 1.2,
    //   height: 60,
    //   padding: const EdgeInsets.symmetric(vertical: 15),
    //   decoration: const BoxDecoration(
    //     border: Border(
    //       top: BorderSide(
    //         width: 1.0,
    //         color: CustomColors.GreyBorder,
    //       ),
    //       bottom: BorderSide(
    //         width: 1.0,
    //         color: CustomColors.GreyBorder,
    //       ),
    //     ),
    //   ),
    //   child: ListView(
    //     scrollDirection: Axis.horizontal,
    //     shrinkWrap: true,
    //     children: <Widget>[
    //       Center(
    //         child: Row(
    //           children: <Widget>[
    //             Container(
    //               height: 10.0,
    //               width: 10.0,
    //               margin: EdgeInsets.only(right: 4),
    //               decoration: BoxDecoration(
    //                 color: CustomColors.YellowAccent,
    //                 shape: BoxShape.circle,
    //               ),
    //             ),
    //             Container(
    //               margin: EdgeInsets.only(right: 10),
    //               child: Text('Personal'),
    //             ),
    //           ],
    //         ),
    //       ),
    //       Center(
    //         child: Container(
    //           margin: EdgeInsets.only(right: 10),
    //           child: Text(
    //             'Work',
    //             style: TextStyle(color: Colors.white),
    //           ),
    //           padding: EdgeInsets.symmetric(
    //               vertical: 5, horizontal: 10),
    //           decoration: BoxDecoration(
    //             borderRadius: BorderRadius.all(
    //               Radius.circular(5),
    //             ),
    //             color: CustomColors.GreenIcon,
    //             boxShadow: [
    //               BoxShadow(
    //                 color: CustomColors.GreenShadow,
    //                 blurRadius: 5.0,
    //                 spreadRadius: 3.0,
    //                 offset: Offset(0.0, 0.0),
    //               ),
    //             ],
    //           ),
    //         ),
    //       ),
    //       Center(
    //         child: Row(
    //           children: <Widget>[
    //             Container(
    //               height: 10.0,
    //               width: 10.0,
    //               margin: EdgeInsets.only(right: 4),
    //               decoration: BoxDecoration(
    //                 color: CustomColors.PurpleIcon,
    //                 shape: BoxShape.circle,
    //               ),
    //             ),
    //             Container(
    //               margin: EdgeInsets.only(right: 10),
    //               child: Text('Meeting'),
    //             ),
    //           ],
    //         ),
    //       ),
    //       Center(
    //         child: Row(
    //           children: <Widget>[
    //             Container(
    //               height: 10.0,
    //               width: 10.0,
    //               margin: EdgeInsets.only(right: 4),
    //               decoration: BoxDecoration(
    //                 color: CustomColors.BlueIcon,
    //                 shape: BoxShape.circle,
    //               ),
    //             ),
    //             Container(
    //               margin: EdgeInsets.only(right: 10),
    //               child: Text('Study'),
    //             ),
    //           ],
    //         ),
    //       ),
    //       Center(
    //         child: Row(
    //           children: <Widget>[
    //             Container(
    //               height: 10.0,
    //               width: 10.0,
    //               margin: EdgeInsets.only(right: 4),
    //               decoration: BoxDecoration(
    //                 color: CustomColors.OrangeIcon,
    //                 shape: BoxShape.circle,
    //               ),
    //             ),
    //             Container(
    //               margin: EdgeInsets.only(right: 10),
    //               child: Text('Shopping'),
    //             ),
    //           ],
    //         ),
    //       ),
    //     ],
    //   ),
    // );
  }

  Widget taskTypeItem(TaskType taskTypeItem, int index) {
    return Obx(() => GestureDetector(
      onTap: () {
        debugPrint('akjsod');
        taskCtrl.currentTaskTypeIndex.value = index;
      },
      child: Container(
          decoration: const BoxDecoration(
            borderRadius: BorderRadius.all(
              Radius.circular(5.0),
            ),
            color: Colors.white,
          ),
          margin: const EdgeInsets.all(10),
          // height: 150.0,
          child: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Container(
                  width: 50,
                  height: 50,
                  decoration: BoxDecoration(
                      color: Color(taskTypeItem.color ?? CustomColors.YellowBackground.value).withOpacity(0.2),
                      borderRadius: const BorderRadius.all(
                        Radius.circular(50.0),
                      ),
                      border: taskCtrl.currentTaskTypeIndex.value == index
                          ? Border.all(color: Color(taskTypeItem.color ?? CustomColors.OrangeIcon.value))
                          : null
                  ),
                  child: Align(
                    child: Image.asset(
                      'assets/images/task_type/${taskTypeItem.icon}.png',
                      width: 20,
                      height: 20,
                      fit: BoxFit.cover,
                      color: Color(taskTypeItem.color ?? CustomColors.OrangeIcon.value),
                    ),
                  ),
                ),
                const SizedBox(height: 5),
                Text(
                  taskTypeItem.title ?? '',
                  style: TextStyle(
                      fontSize: 12,
                      color: taskCtrl.currentTaskTypeIndex.value == index
                        ? Color(taskTypeItem.color ?? CustomColors.TextHeaderGrey.value)
                        : CustomColors.TextHeaderGrey),
                ),
              ],
            ),
          )),
    ));
  }
  
  // Widget chooseDate() {
  //   return Column(
  //     children: [
  //       Container(
  //         width: MediaQuery.of(context).size.width / 1.2,
  //         child: Text(
  //           'Choose date',
  //           textAlign: TextAlign.left,
  //           style: TextStyle(fontSize: 12),
  //         ),
  //       ),
  //       SizedBox(height: 10),
  //       Container(
  //         width: MediaQuery.of(context).size.width / 1.2,
  //         child: Row(
  //           children: <Widget>[
  //             Text(
  //               'Today, 19:00 - 21:00',
  //               textAlign: TextAlign.left,
  //               style: TextStyle(
  //                   fontSize: 12,
  //                   fontWeight: FontWeight.w600),
  //             ),
  //             SizedBox(width: 5),
  //             RotatedBox(
  //               quarterTurns: 1,
  //               child: Icon(Icons.chevron_right),
  //             ),
  //           ],
  //         ),
  //       ),
  //       SizedBox(height: 10),
  //     ],
  //   );
  // }

  // Widget addSubTask() {
  //   return Container(
  //     width: 150.w,
  //     child: AppButton(
  //       content: 'Add subtask',
  //       gradientColors: const [
  //         CustomColors.BlueLight,
  //         CustomColors.BlueDark,
  //       ],
  //       boxShadow: const [
  //         // BoxShadow(
  //         //   color: CustomColors.BlueShadow,
  //         //   blurRadius: 3.0,
  //         //   spreadRadius: 1.0,
  //         //   offset: Offset(0.0, 0.0),
  //         // ),
  //       ],
  //       onTap: () {
  //         subTasks.add('New subtask');
  //       },
  //     ),
  //   );
  // }

  // Widget subTasksShow() {
  //   return SizedBox(
  //     width: MediaQuery.of(context).size.width / 1.2,
  //     height: 150,
  //     child: ListView.builder(
  //       itemCount: subTasks.length,
  //       itemBuilder: (BuildContext context, int index) {
  //         return Container(
  //           margin: const EdgeInsets.only(bottom: 5.0),
  //           child: TextFormField(
  //             initialValue: subTasks[index],
  //             autofocus: false,
  //             style: TextStyle(
  //               fontSize: 18,
  //               fontStyle: FontStyle.normal,
  //               color: Colors.grey[850],
  //             ),
  //             decoration: const InputDecoration(
  //               border: InputBorder.none,
  //               enabledBorder: OutlineInputBorder(
  //                 borderSide: BorderSide(
  //                   color: Colors.grey,
  //                   width: 1.0,
  //                 ),
  //                 borderRadius: BorderRadius.all(
  //                   Radius.circular(50.0),
  //                 ),
  //               ),
  //               focusedBorder: OutlineInputBorder(
  //                 borderSide: BorderSide(
  //                   color: Colors.blue,
  //                   width: 2.0,
  //                 ),
  //                 borderRadius: BorderRadius.all(
  //                   Radius.circular(50.0),
  //                 ),
  //               ),
  //             ),
  //           ),
  //         );
  //       },
  //     ),
  //   );
  // }

  Widget addTask() {
    return SizedBox(
      width: ScreenUtil().screenWidth - 60.w,
      child: AppButton(
        content: 'Add task',
        gradientColors: const [
          CustomColors.BlueLight,
          CustomColors.BlueDark,
        ],
        // boxShadow: const [
        //   BoxShadow(
        //     color: CustomColors.BlueShadow,
        //     blurRadius: 3.0,
        //     spreadRadius: 1.0,
        //     offset: Offset(0.0, 0.0),
        //   ),
        // ],
        onTap: () {

          if (taskTitleCtrl.text.isEmpty) {
            showToast('任务标题不可为空');
            return;
          }

          // Color(0xFFFFFF).toString();

          Task task = Task(
            tid: generateRandomString(10),
            title: taskTitleCtrl.text,
            createTime: DateTime.now().millisecondsSinceEpoch,
            isDone: 0,
            remind: 0,
            type: 0
          );

          taskCtrl.addTask(task);
          Get.back();

        },
      ),
    );
  }
}

